<template>
	<view class="content">
<canvas class="facecat" id="myCanvas" canvas-id="myCanvas" style="width:100%;height:2000rpx;" @touchstart="touchStartCanvas" @touchmove="touchMoveCanvas" @touchend="touchEndCanvas"/>
	</view>
</template>
<script>
	import facecat from './facecat.js';
	import facecat_uni from './facecat_uni.js';
	let gPaint = new facecat.FCPaint();
	
    /*
    * 点击方法
    * view:视图
    * firstTouch:是否第一次触摸
    * firstPoint:第一次触摸的坐标
    * secondTouch:是否第二次触摸
    * secondPoint:第二次触摸的坐标
    * clicks:点击次数
    */
    gPaint.onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
        facecat.onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
		if (view.viewName == "Button") {
			alert(view.text);
		} else if (view.viewName == "Button2") {
			alert(view.text);
		} else if (view.viewName == "Button3") {
			alert(view.text);
		} else if (view.viewName == "Button4") {
			alert(view.text);
		}
	};
		
	export default { 
		data() {
			return {
				widthEle : 0, 
				heightEle: 0
			}
		},
		onLoad() {
		}, 
		mounted(){
				if(document){
					canvas = document.querySelector('#myCanvas');
					gPaint.isMobile = facecat.isMobileMode();
					facecat.addDefaultEvent(canvas, gPaint);
				}else{
					canvas = uni.createSelectorQuery('#myCanvas');
					gPaint.isMobile = true;
				}
				//注册事件
				uni.getSystemInfo({ 
				  success: (res) => {
					this.widthEle = res.windowWidth;
					this.heightEle = res.windowHeight;
				  }
				});
				this.windowResizeCallback = (res) => {
					try {
						this.widthEle = res.size.windowWidth;
						this.heightEle = res.size.windowHeight;
						let canvas = null;
						if(document){
							canvas = document.querySelector('#myCanvas');
						}else{
							canvas = uni.createSelectorQuery('#myCanvas');
						}
						canvas.width = this.widthEle;
						canvas.height = this.heightEle;
						facecat.updateViewDefault(gPaint.views);
					} catch (err) {
					}
					facecat.invalidate(gPaint);
				};
				canvas.width = this.widthEle;
				canvas.height = this.heightEle;
				gPaint.canvas = canvas;
				gPaint.container = this;
				/*
				* 重绘背景的实现方法
				* view:视图
				* paint:绘图对象
				* clipRect:裁剪区域
				*/
				gPaint.onPaint = function (view, paint, clipRect) {
					 if (view.viewName == "Button4") {
						paint.fillRect("rgb(255,0,0)", 0, 0, view.size.cx, view.size.cy);
					} else {
						facecat.onPaintDefault(view, paint, clipRect);
					}
				};
				
				//解析加载XML
				let xml = `<?xml version="1.0" encoding="utf-8"?>
				<html xmlns="facecat">
				  <head>
				  </head>
				  <body>
					<div dock="fill" type="tab" selectedindex="0">
					  <div name="TabPage" text="可视化生成" type="tabpage">
						<input type="button" name="Button" text="取消" location="35,50" size="100,20" backcolor="rgb(170,178,189)" cornerradius="4" textcolor="rgb(255,255,255)" />
						<input type="button" name="Button2" text="确认" location="32,92" size="130,38" font="Default,16.0" backcolor="rgb(59,174,218)" bordercolor="rgb(255,0,0)" textcolor="rgb(255,255,255)" />
						<input type="button" name="Button3" text="查询" location="33,155" size="100,42" textcolor="rgb(0,0,5)" backcolor="rgb(140,192,81)" font="Default,14.0" cornerradius="10" />
					  </div>
					  <div name="TabPage2" text="代码创建" type="tabpage" />
					  <div name="TabPage3" text="自定义重绘" type="tabpage">
						<input type="custom" cid="mybutton" name="Button4" text="删除" location="74,84" size="100,40" />
					  </div>
					</div>
				  </body>
				</html>
				`;
				if(document){
					facecat.renderFaceCat(gPaint, xml);
				}else{
					canvas.id = "myCanvas";
					facecat_uni.renderFaceCatUni(gPaint, xml);
				}
				//获取第二页
				let tabPage = facecat.findViewByName("TabPage2", gPaint.views);
				let button = new facecat.FCButton();
				button.location = new facecat.FCPoint(100, 100);
				button.size = new facecat.FCSize(100, 20);
				button.backColor = "rgb(255,255,255)";
				button.textColor = "rgb(0,0,0)";
				button.borderColor = "rgb(150,150,150)";
				facecat.addViewToParent(button, tabPage);
				button.text = "确定";
		},
		methods: {
			touchStartCanvas: function (e) {
				facecat_uni.handleTouchStart(gPaint, e, null);
			},touchMoveCanvas: function (e) {
				facecat_uni.handleTouchMove(gPaint, e, null);
			},touchEndCanvas: function (e) {
				facecat_uni.handleTouchEnd(gPaint, e, null, null);
			}
		}
	}
</script>

<style>
</style>
